<template>
  <div class="about">
    <h1 @click="add">{{ a }}</h1>
    <div :style="divStyle" ref="divDom">111</div>
    <ul ref="ulDom">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import {
  computed,
  ref,
  watch,
  watchEffect,
  inject,
  getCurrentInstance,
  defineProps, defineEmits
} from "vue";
import { onMounted } from "@vue/runtime-core";
const a = ref(1);
const divDom = ref<HTMLDivElement | null>(null);
const ulDom = ref<HTMLDivElement | null>(null);
const add = () => {
  a.value = 100;
};
const divStyle = computed(() => {
  return {
    color: "red",
  };
});
const ctx = getCurrentInstance();
console.log(ctx);
// const props = defineProps({
//   name: {
//     type: String,
//   },
// });
// props.name
/**
 * value:
 * input
 *v-model:modelValue=""
 * v-model:value= ""
 * vue3
 * modelValue
 * update:modelValue
 */
const pusub = inject(["pubsub"]);

console.log(pusub);
onMounted(() => {
  // console.log((ulDom.value as HTMLDivElement).childNodes,
  // (ulDom.value as HTMLDivElement).child)
  // // (divDom.value as HTMLDivElement).addEventListener("mouseover", () => {
  // //   alert("hover");
  // // });
  // (ulDom.value as HTMLDivElement).addEventListener("click",(e)=>{
  //   console.log(e.target)
  // })
});
</script>
